<template>
    <view class="b5-car-box max-width">
        <view class="b5-car-input">
            <template v-for="(item,index) in numberList">
                <view class="car-input-cell" @click="checkNumber(index)" v-if="index<2">
                    <view :class="['input-cell-box1',index===activeIndex?'active':'']">
                        <view class="input-cell-box2">{{item}}</view>
                    </view>
                </view>
            </template>

            <view class="car-input-cell dot">•</view>
            <template v-for="(item,index) in numberList" >
                <view class="car-input-cell" @click="checkNumber(index)" v-if="index>1">
                    <view class="input-cell-box1" :class="['input-cell-box1',index===activeIndex?'active':'']">
                        <view class="input-cell-box2">
                            <template v-if="index === numberLength - 1">
                                <template v-if="item">{{item}}</template>
                                <template v-else>
                                    <view class="new-tip">
                                        <text class="add">+</text>
                                        <text>新能源</text>
                                    </view>
                                </template>
                            </template>
                            <template v-else>
                                {{item}}
                            </template>
                        </view>
                    </view>
                </view>
            </template>
        </view>
        <view class="b5-car-footer">
            <view class="b5-car-list">
                <view class="b5-car-list-cell" v-for="(item,index) in getList" :key="index">
                    <view class="cell-box1" @click="codeClick(item)">
                        <template v-if="activeIndex > 0">
                            <!-- 第二位市字母 -->
                            <template v-if="activeIndex === 1">
                                 <view :class="['cell-box2',noCheck2.indexOf(item)>-1?'disabled':'']">{{item}}</view>
                            </template>
                            <!-- 最后一位非新能源可能是特殊 -->
                            <template v-else-if="activeIndex === numberLength -2">
                                <view :class="['cell-box2',noCheckLast2.indexOf(item)>-1?'disabled':'']">{{item}}</view>
                            </template>
                            <template v-else>
                                <view :class="['cell-box2',noCheckOther.indexOf(item)>-1?'disabled':'']">{{item}}</view>
                            </template>
                        </template>
                        <template v-else>
                             <view class="cell-box2">{{item}}</view>
                        </template>
                    </view>
                </view>
                <view class="b5-car-list-cell">
                    <view class="cell-box1" @click="clearCode">
                        <view class="cell-box2 del_icon"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"b5-car-number",
        props:{
            carNum:{
                type:String,
                default:''
            }
        },
        data(){
            return {
                provinceList:['京', '津', '沪', '渝', '苏', '浙', '豫', '粤', '川', '陕', '冀', '辽', '吉', '皖', '闽', '鄂', '湘', '鲁', '晋', '黑', '赣', '贵', '甘', '桂', '琼', '云', '青', '蒙', '藏', '宁', '新'],
                //正常的
                codeList:[1,2,3,4,5,6,7,8,9,0,'Q','W','E','R','T','Y','U','O','P','军','A','S','D','F','G','H','J','K','L','警','Z','X','C','V','B','N','M','港','澳'],
                //最后一位非新能源的去除O 增加学
                codeListLast2:[1,2,3,4,5,6,7,8,9,0,'Q','W','E','R','T','Y','U','P','学','军','A','S','D','F','G','H','J','K','L','警','Z','X','C','V','B','N','M','港','澳'],
                noCheck2:[0,1,2,3,4,5,6,7,8,9,'港','澳','军','警'], //第二位不能选的
                noCheckLast2:['O'], //倒数第二位不能选的
                noCheckOther:['O','港','澳','军','警'] ,//非第二位和倒数第二位不能选择
                numberList:[],
                numberLength:8,
                activeIndex:0
            }
        },
        created() {
            this.initNumber()
        },
        computed:{
            getList(){
                if(this.activeIndex<1){
                    return this.provinceList
                }else if(this.activeIndex === this.numberLength-2){
                    return this.codeListLast2
                }else{
                    return this.codeList
                }
            }
        },
        methods:{
            // 初始化车牌数组
            initNumber(){
                let numberList = []
                let defaultVal = this.carNum
                defaultVal = this.carNum.split('')
                for (let i = 0; i < this.numberLength; i++) {
                    numberList.push(defaultVal[i] || '')
                }
                this.numberList = numberList
            },
            // 选择第几位车牌
            checkNumber(index){
                this.activeIndex = index
            },
            checkCodeIsOk(val){
                if(this.activeIndex < 1) {
                    return true
                }else if(this.activeIndex === 1){
                    return this.noCheck2.indexOf(val) < 0
                }else if (this.activeIndex === this.numberLength - 2){
                    return this.noCheckLast2.indexOf(val) < 0
                }else{
                    return this.noCheckOther.indexOf(val) < 0
                }

            },
            // 选择号码
            codeClick(val){
                if(!this.checkCodeIsOk(val)) return
                this.numberList[this.activeIndex] = `${val}`
                if(this.activeIndex +1 < this.numberLength){
                    this.activeIndex = this.activeIndex + 1
                }
                this.updateCarNum()
            },
            // 删除号码
            clearCode(){
                this.numberList[this.activeIndex] = ''
                if(this.activeIndex>0){
                    this.activeIndex = this.activeIndex - 1
                }
                this.updateCarNum()
            },
            updateCarNum(){
                this.$emit("carInput",this.numberList)
                this.$forceUpdate()
            }
        }
    }
</script>

<style lang="scss" scoped>
.b5-car-box{
    background-color: #E3E2E7;width: 100%;
    border-radius: 10rpx 10rpx 0 0;overflow: hidden;
    padding-bottom: var(--window-bottom);
}
.b5-car-input{
    width: 100%;padding: 16rpx 10rpx;background: #ffffff;display: flex;align-items: center;
    justify-content: space-between;box-sizing: border-box;
    .car-input-cell{
        width: 11.11%;position: relative;padding: 10rpx;box-sizing: border-box;
        &.dot{
            max-width: 20rpx;font-size: 40rpx;color: #999;padding: 0;overflow: hidden;
        }
        .input-cell-box1{
            position: relative;width: 100%;height: 0;padding-bottom: 110%;border-radius: 6rpx;background-color: #EEE;color: #222;box-sizing: border-box;
            &.active{border: 1rpx solid #0FD09B;}
            .input-cell-box2{
                position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;font-size: 34rpx;display: flex;align-items: center;justify-content: center;
            }
        }
        &:last-child{
            .input-cell-box1{
                background-color: rgba(15,208,155, .2);color: #0FD09B;
                .input-cell-box2{
                    .new-tip{
                       font-size: 28rpx;transform: scale(.5);display: flex;align-items: center;justify-content: center;flex-direction: column;
                       .add{font-size: 40rpx;}
                       text{white-space: nowrap;}
                    }
                }
            }
        }
    }
}
.b5-car-list{
    width: 100%;padding: 20rpx 10rpx 30rpx 10rpx;box-sizing: border-box;display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;
    .b5-car-list-cell{
        width: 10%;padding: 6rpx;
        .cell-box1{
            position: relative;width: 100%;height: 0;padding-bottom: 120%;background-color: #FFF;border-radius: 6rpx;
            &:active{background-color: #eee;}
            .cell-box2{
                position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;color: #222;font-size: 32rpx;cursor: pointer;display: flex;align-items: center;justify-content: center;
                &.disabled{color: #bbb;}
                &.del_icon{
                    background: url("") no-repeat center/70% auto;
                }
            }
        }
    }
}
</style>
